<template>
	<div class="mainContainer">

		<el-dialog :visible.sync="preDialogVisible" width="450px" :before-close="handleClose">
			<div class="dialogContent">
				<img src="../../assets/image/red0913/1-1.png" class="previewImage" />
				<div class="shopBtnWrap">
					<el-button type="text" @click="preDialogVisible = false">取消</el-button>
					<el-button type="text" @click="preDialogVisible = false">购买</el-button>
				</div>
			</div>
		</el-dialog>

		<!-- preViewContent -->
		<el-dialog :visible.sync="dialogVisible" width="1000px">
				<div class="preUploadData">
					<img width="50%" height="100%" :src="dialogImageUrl" alt="" class="preUploadImage">
					<el-form ref="form" :model="form" label-width="80px" class="preUploadForm">
						<el-form-item label="名称">
							<el-input v-model="form.parName"></el-input>
						</el-form-item>
						<el-form-item label="部位类型">
							<el-input v-model="form.partType"></el-input>
						</el-form-item>
						<el-form-item label="作者名称">
							<el-input v-model="form.authorName"></el-input>
						</el-form-item>
						<el-form-item label="发行价格">
							<el-input v-model="form.issuePrice"></el-input>
						</el-form-item>
						<el-form-item label="发行数量">
							<el-input v-model="form.totalIssuance"></el-input>
						</el-form-item>
						<el-form-item label="介绍">
							<el-input v-model="form.introduce"></el-input>
						</el-form-item>
						<el-button type="plan" @click="submitUpload">确认上传</el-button>
					</el-form>
			</div>
		</el-dialog>

		<!-- 把这里设置成一个艺术家可见界面的 -->

		<!-- list-type="picture-card" -->
		<!-- drag-->
		<!-- :auto-upload="false" -->
		<div class="uploadWarp">
		<el-upload action="https://jsonplaceholder.typicode.com/posts/" class="avatar-uploader" ref="upload"
			:auto-upload="false" :limit="1" :file-list="fileList" :on-success="handleAvatarSuccess"
			:on-exceed="handleExceed" :on-preview="handlePictureCardPreview" :on-change="handleChange"
			:on-remove="handleRemove" :beforeRemove="beforeRemove" :before-upload="beforeAvatarUpload" drag>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em> <br>只能上传 jpg/png 文件</div>
		</el-upload>
		</div>
		<!-- 可以这种方式显示本地 url -->
		<Parts v-for="item in imageData" :key=item.src :src="item.src"></Parts>

	</div>

</template>
<script>
	import Parts from '../content/Parts.vue'
	export default {
		components: {
			Parts,
		},
		data() {
			return {
				form: {
					authorName:'',
					totalIssuance:'',
					issuePrice:'',
					partType:'',
					parName:'',
					introduce:''
				},
				fileList: [],
				preDialogVisible: false,
				dialogVisible: false,
				dialogImageUrl: '',
				disabled: false,
				imageData: [{
					src: require("../../assets/image/red0913/1-1.png")
				}, {
					src: require("../../assets/image/red0913/1-2.png")
				}, {
					src: require("../../assets/image/red0913/1-3.png")
				}, {
					src: require("../../assets/image/blue0913/1-1.png")
				}, {
					src: require("../../assets/image/blue0913/1-2.png")
				}, {
					src: require("../../assets/image/blue0913/1-3.png")
				}],

				// userId: this.$route.params.id,
				// userId1: $route.params.id
			};
		},

		methods: {
			handleClose(done) {
				done();
			},

			preViewParts() {
				console.log("preViewParts-preViewParts-preViewParts-preViewParts");
			},

			handleAvatarSuccess(res, file) {
				console.log("上传成功：handleAvatarSuccess:" + file.raw);
				this.dialogImageUrl = URL.createObjectURL(file.raw);

				console.log(Object.keys(file));
				let rawurl = URL.createObjectURL(file.raw);
				console.log("rawurl====" + rawurl);
			},

			handleChange(file, fileList) {
				console.log("触发改变的方法 handleChange :" + file);
				console.log(Object.keys(file));
				let rawurl = URL.createObjectURL(file.raw);
				console.log("rawurl====" + rawurl);
				this.dialogImageUrl = rawurl;

				this.fileList = fileList;
				this.dialogVisible = true;
			},

			handlePictureCardPreview(file) {
				// this.dialogImageUrl = file.url;
				// console.log("预览图片 handlePictureCardPreview url:" + file.url);


				// console.log(Object.keys(file));
				// let rawurl = URL.createObjectURL(file.raw);
				// console.log("rawurl====" + rawurl);

				// this.dialogImageUrl = rawurl;

				this.dialogVisible = true;

			},

			handleRemove(file, fileList) {
				console.log("删除 handleRemove url:" + file.url);
				console.log(file, fileList);
			},



			beforeRemove(file, fileList) {
				console.log("准备删除了 beforeRemove :" + fileList);
				return true;
				// return this.$confirm(`确定移除 ${ file.name }？`);
			},

			handleExceed(files, fileList) {
				console.log("超出 handleExceed ");
				this.$message.warning(`只能传 1 张图片`);
			},



			beforeAvatarUpload(file) {
				console.log("上传之前检查");
				const isJPG = file.type === 'image/jpeg';
				const isPNG = file.type === 'image/png';
				// let isPic = isPNG || isJPG;
				let isPic = true;

				// const isLt2M = file.size / 1024 / 1024 < 2;
				const isLt2M = true;

				console.log("file.type:" + file.type);
				console.log("isPNG:" + isPNG)

				if (!isPic) {
					this.$message.error('仅支持 JPG/PNG 图片格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isPic && isLt2M;
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
		},

		computed: {
			userId() {
				console.log("this.$route.params.userid");
				console.log("this.$route.query.name");
				return this.$route.query.name;
			}
		}


	}
</script>
<style scoped>
	.mainContainer {
		height: 100vh;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}


	.previewImage {
		width: 100%;
		/* height: 100%; */
	}

	.uploadWarp{
		margin-left: 50px;
	}

	.preUploadData {
		margin: 40px auto;
		display: flex;
		width: 900px;
		justify-content: center;
		align-items: center;
	}

	.preUploadForm {
		width: 40%;
		margin-left: 50px;
		margin-top: 10px;
	}

	.shopBtnWrap {
		display: flex;
		width: 100%;
		justify-content: space-between;
		-webkit-justify-content: space-between;
	}
	
</style>
